<script setup>
import { ref, computed, onMounted } from 'vue';
import model from './model.vue';

const isMoving = ref(false)
const enterX = ref();

const initialX1 = 0;
const initialX2 = 0;
const initialX3 = 0;
const initialX4 = 0;
const initialX5 = 0;
const initialX6 = 0;
const initialX7 = 104;
const initialX8 = 0;
const initialX9 = 0;
const initialX10 = 10.4;
const initialX11 = 0;
const initialX12 = 0;
const initialX13 = 0;
const initialX14 = 0;
const initialX15 = 0;
const initialX16 = 0;
const initialX17 = 260
const initialX18 = 104;
const initialX19 = 0;
const initialX20 = 0;
const initialX21 = 0;
const initialX22 = 0;

const transformX1 = ref(initialX1);
const transformX2 = ref(initialX2);
const transformX3 = ref(initialX3);
const transformX4 = ref(initialX4);
const transformX5 = ref(initialX5);
const transformX6 = ref(initialX6);
const transformX7 = ref(initialX7);
const transformX8 = ref(initialX8);
const transformX9 = ref(initialX9);
const transformX10 = ref(initialX10);
const transformX11 = ref(initialX11);
const transformX12 = ref(initialX12);
const transformX13 = ref(initialX13);
const transformX14 = ref(initialX14);
const transformX15 = ref(initialX15);
const transformX16 = ref(initialX16);
const transformX17 = ref(initialX17);
const transformX18 = ref(initialX18);
const transformX19 = ref(initialX19);
const transformX20 = ref(initialX20);
const transformX21 = ref(initialX21);
const transformX22 = ref(initialX22);



const onMouseEnter = (event) => {
    isMoving.value = true;
    enterX.value = event.clientX;
}

const onMouseMove = (event) => {
    const curX = event.clientX;

    const offsetX1 = (curX - enterX.value)/500;
    const offsetX2 = (curX - enterX.value)/500;
    const offsetX3 = (curX - enterX.value)/200;
    const offsetX4 = (curX - enterX.value)/200;
    const offsetX5 = (curX - enterX.value)/100;
    const offsetX6 = (curX - enterX.value)/100;
    const offsetX7 = (curX - enterX.value)/9;
    const offsetX8 = (curX - enterX.value)/100;
    const offsetX9 = (curX - enterX.value)/80;
    const offsetX10 = (curX - enterX.value)/100;
    const offsetX11 = (curX - enterX.value)/50;
    const offsetX12 = (curX - enterX.value)/100;
    const offsetX13 = (curX - enterX.value)/50;
    const offsetX14 = (curX - enterX.value)/50;
    const offsetX15 = (curX - enterX.value)/100;
    const offsetX16 = (curX - enterX.value)/10;
    const offsetX17 = (curX - enterX.value)/10;
    const offsetX18 = (curX - enterX.value)/10;
    const offsetX19 = (curX - enterX.value)/6;
    const offsetX20 = (curX - enterX.value)/12;
    const offsetX21 = (curX - enterX.value)/10;
    const offsetX22 = (curX - enterX.value)/6;
    
    transformX1.value = initialX1 + offsetX1;
    transformX2.value = initialX2 + offsetX2;
    transformX3.value = initialX3 + offsetX3;
    transformX4.value = initialX4 + offsetX4;
    transformX5.value = initialX5 + offsetX5;
    transformX6.value = initialX6 + offsetX6;
    transformX7.value = initialX7 + offsetX7;
    transformX8.value = initialX8 + offsetX8;
    transformX9.value = initialX9 + offsetX9;
    transformX10.value = initialX10 + offsetX10;
    transformX11.value = initialX11 + offsetX11;
    transformX12.value = initialX12 + offsetX12;
    transformX13.value = initialX13 + offsetX13;
    transformX14.value = initialX14 + offsetX14;
    transformX15.value = initialX15 + offsetX15;
    transformX16.value = initialX16 + offsetX16;
    transformX17.value = initialX17 + offsetX17;
    transformX18.value = initialX18 + offsetX18;
    transformX19.value = initialX19 + offsetX19;
    transformX20.value = initialX20 + offsetX20;
    transformX21.value = initialX21 + offsetX21;
    transformX22.value = initialX22 + offsetX22;
}

const onMouseLeave = () => {
    isMoving.value = false;

    transformX1.value = initialX1;
    transformX2.value = initialX2;
    transformX3.value = initialX3;
    transformX4.value = initialX4;
    transformX5.value = initialX5;
    transformX6.value = initialX6;
    transformX7.value = initialX7;
    transformX8.value = initialX8;
    transformX9.value = initialX9;
    transformX10.value = initialX10;
    transformX11.value = initialX11;
    transformX12.value = initialX12;
    transformX13.value = initialX13;
    transformX14.value = initialX14;
    transformX15.value = initialX15;
    transformX16.value = initialX16;
    transformX17.value = initialX17;
    transformX18.value = initialX18;
    transformX19.value = initialX19;
    transformX20.value = initialX20;
    transformX21.value = initialX21;
    transformX22.value = initialX22;
}

const center_searchformIsfocused = ref(false)

const onFocus = (id) => {
    if(id == 'center_searchform') center_searchformIsfocused.value = true;
}

const onFocusOut = (id) => {
    if(id == 'center_searchform') center_searchformIsfocused.value = false;
}


const uploadModel = ref(false);

const showModel = () => {
    uploadModel.value = true;
}

const closeModel = () => {
    uploadModel.value = false;
    coverSrc.value = null;
}

</script>

<template>

    <div class="bili">

        <!--头-->
        <div class="bili-header large-header">

            <div @mousemove="onMouseMove" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
                <!--顶部-->
                <div class="bili-header__bar">

                    <!--左边列表-->
                    <ul class="left-entry">

                        <li>
                            <a href="" class="default-entry">
                                <span>首页</span>
                            </a>
                        </li>

                        <li>
                            <a href="" class="default-entry">
                                <span>番剧</span>
                            </a>
                        </li>

                        <li>
                            <a href="" class="default-entry">
                                <span>直播</span>
                            </a>
                        </li>

                        <li>
                            <a href="" class="default-entry">
                                <span>游戏中心</span>
                            </a>
                        </li>

                        <li>
                            <a href="" class="default-entry">
                                <span>会员购</span>
                            </a>
                        </li>

                        <li>
                            <a href="" class="default-entry">
                                <span>漫画</span>
                            </a>
                        </li>

                        <li>
                            <a href="" class="default-entry">
                                <span>赛事</span>
                            </a>
                        </li>

                        <li>
                            <a href="" class="default-entry">
                                <span>下载客户端</span>
                            </a>
                        </li>

                    </ul>

                    <!--中间搜索框-->
                    <div class="center-search-container">

                        <!--搜索栏-->
                        <div class="center-search__bar">
                            <form id="center-searchform" @focusin="onFocus('center_searchform')" @focusout="onFocusOut('center_searchform')" class style="border-radius: 8px;">
                                <div class="center-search-content" :class="{ focused: center_searchformIsfocused }">
                                    <input class="center-search-input" type="text" autocomplete="off" maxlength="100" value="">
                                </div>

                                <div class="center-search-btn">
                                    <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.3451 15.2003C16.6377 15.4915 16.4752 15.772 16.1934 16.0632C16.15 16.1279 16.0958 16.1818 16.0525 16.2249C15.7707 16.473 15.4456 16.624 15.1854 16.3652L11.6848 12.8815C10.4709 13.8198 8.97529 14.3267 7.44714 14.3267C3.62134 14.3267 0.5 11.2314 0.5 7.41337C0.5 3.60616 3.6105 0.5 7.44714 0.5C11.2729 0.5 14.3943 3.59538 14.3943 7.41337C14.3943 8.98802 13.8524 10.5087 12.8661 11.7383L16.3451 15.2003ZM2.13647 7.4026C2.13647 10.3146 4.52083 12.6766 7.43624 12.6766C10.3517 12.6766 12.736 10.3146 12.736 7.4026C12.736 4.49058 10.3517 2.1286 7.43624 2.1286C4.50999 2.1286 2.13647 4.50136 2.13647 7.4026Z" fill="currentColor"></path></svg>
                                </div>
                            </form>
                        </div>

                    </div>

                    <!--右边列表-->
                    <ul class="right-entry">

                        <li class="v-popover-wrap">
                            <a class="right_entry__outside" href="">
                                <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg" class="right-entry-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.0505 3.16759L12.7915 6.69573C12.954 7.02647 13.2702 7.25612 13.6349 7.30949L17.5294 7.87474C18.448 8.00817 18.8159 9.13785 18.1504 9.78639L15.3331 12.5334C15.0686 12.7905 14.9481 13.1609 15.0104 13.5256L15.6759 17.4031C15.8328 18.3184 14.8721 19.0171 14.0497 18.5845L10.5661 16.7537C10.2402 16.5823 9.85042 16.5823 9.52373 16.7537L6.04087 18.5845C5.21848 19.0171 4.2578 18.3184 4.41468 17.4031L5.07939 13.5256C5.14166 13.1609 5.02198 12.7905 4.75755 12.5334L1.9394 9.78639C1.27469 9.13785 1.64182 8.00817 2.56126 7.87474L6.4549 7.30949C6.82041 7.25612 7.13578 7.02647 7.29832 6.69573L9.04015 3.16759C9.45095 2.33468 10.6389 2.33468 11.0505 3.16759Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.603 11.8739C11.413 12.5556 10.7871 13.0554 10.0447 13.0554C9.29592 13.0554 8.66679 12.5467 8.48242 11.8569" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                                <span class="right-entry-text">收藏</span>
                            </a>
                        </li>

                        <li class="v-popover-wrap">
                            <a class="right_entry__outside" href="">
                                <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg" class="right-entry-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 1.74286C5.02955 1.74286 1 5.7724 1 10.7429C1 15.7133 5.02955 19.7429 10 19.7429C14.9705 19.7429 19 15.7133 19 10.7429C19 5.7724 14.9705 1.74286 10 1.74286ZM10.0006 3.379C14.0612 3.379 17.3642 6.68282 17.3642 10.7426C17.3642 14.8033 14.0612 18.1063 10.0006 18.1063C5.93996 18.1063 2.63696 14.8033 2.63696 10.7426C2.63696 6.68282 5.93996 3.379 10.0006 3.379Z" fill="currentColor"></path><path d="M9.99985 6.6521V10.743" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"></path><path d="M12.4545 10.7427H10" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"></path></svg>
                                <span class="right-entry-text">历史</span>
                            </a>
                        </li>

                        <li class="right-entry-item right-entry-item--upload v-popover-wrap">
                            <a @click="showModel">
                                <div class="header-upload-entry">
                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="header-upload-entry__icon"><path d="M12.0824 10H14.1412C15.0508 10 15.7882 10.7374 15.7882 11.6471V12.8824C15.7882 13.792 15.0508 14.5294 14.1412 14.5294H3.84707C2.93743 14.5294 2.20001 13.792 2.20001 12.8824V11.6471C2.20001 10.7374 2.93743 10 3.84707 10H5.90589" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.99413 11.2353L8.99413 3.82353" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12.0823 6.29413L8.9941 3.20589L5.90587 6.29413" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                                    <span class="header-upload-entry__text">上传视频</span>
                                </div>
                            </a>
                        </li>
                    </ul>

                </div>

                <!--图片-->
                <div class="bili-header__banner">
                    <div class="animated-banner">

                        <div class="layer">
                            <img src="../assets/picture/head1.webp" 
                                data-height="300" data-width="3200" height="156" width="1664"
                                :style="{height: '156px', width: '1664px', transform: `translate(${transformX1}px, 0px) rotate(0deg)`,
                                transition: isMoving ? 'none' : 'transform 0.2s ease-out'}">
                        </div>

                        <div class="layer">
                            <img src="../assets/picture/head2.webp" 
                                data-height="300" data-width="3200" height="156" width="1664"
                                :style="{height: '156px', width: '1664px', transform: `translate(${transformX2}px, 0px) rotate(0deg)`,
                                transition: isMoving ? 'none' : 'transform 0.2s ease-out'}">
                        </div>

                        <div class="layer">
                            <img src="../assets/picture/head3.webp" 
                                data-height="300" data-width="3200" height="156" width="1664"
                                :style="{height: '156px', width: '1664px', transform: `translate(${transformX3}px, 0px) rotate(0deg)`,
                                transition: isMoving ? 'none' : 'transform 0.2s ease-out'}">
                        </div>

                        <div class="layer">
                            <img src="../assets/picture/head4.webp" 
                                data-height="300" data-width="3200" height="159" width="1696"
                                :style="{height: '159px', width: '1696px', transform: `translate(${transformX4}px, 0px) rotate(0deg)`,
                                transition: isMoving ? 'none' : 'transform 0.2s ease-out'}">
                        </div>

                        <div class="layer">
                            <img src="../assets/picture/head5.webp" 
                                data-height="300" data-width="3200" height="156" width="1664" 
                                :style="{height: '156px', width: '1664px', transform: `translate(${transformX5}px, 0px) rotate(0deg)`,
                                transition: isMoving ? 'none' : 'transform 0.2s ease-out'}">
                        </div>

                        <div class="layer">
                            <img src="../assets/picture/head6.webp"
                                data-height="300" data-width="3200" height="156" width="1664" 
                                :style="{height: '156px', width: '1664px', transform: `translate(${transformX6}px, 0px) rotate(0deg)`, 
                                transition: isMoving ? 'none' : 'transform 0.2s ease-out'}">
                        </div>

                        <div class="layer">
                            <img src="../assets/picture/head7.webp" 
                                data-height="300" data-width="3200" height="156" width="1664" 
                                :style="{height: '200px', width: '1664px', transform: `translate(${transformX7}px, -10.4px) rotate(0deg)`, 
                                transition: isMoving ? 'none' : 'transform 0.2s ease-out'}">
                        </div>

                        <div class="layer">
                            <img src="../assets/picture/head8.webp" 
                                data-height="300" data-width="3200" height="156" width="1664" 
                                :style="{height: '156px', width: '1664px', transform: `translate(${transformX8}px, 0px) rotate(0deg)`, 
                                transition: isMoving ? 'none' : 'transform 0.2s ease-out'}">
                        </div>

                        <div class="layer">
                            <img src="../assets/picture/head9.webp" 
                                data-height="300" data-width="3200" height="156" width="1664" 
                                :style="{height: '156px', width: '1664px', transform: `translate(${transformX9}px, 0px) rotate(0deg)`, 
                                transition: isMoving ? 'none' : 'transform 0.2s ease-out'}">
                        </div>

                        <div class="layer">
                            <img src="../assets/picture/head10.webp" 
                                data-height="300" data-width="3200" height="156" width="1664" 
                                :style="{height: '156px', width: '1664px', transform: `translate(${transformX10}px, 0px) rotate(0deg)`, 
                                transition: isMoving ? 'none' : 'transform 0.2s ease-out'}">
                        </div>

                        <div class="layer">
                            <img src="../assets/picture/head11.webp" 
                                data-height="300" data-width="3200" height="156" width="1664" 
                                :style="{height: '156px', width: '1664px', transform: `translate(${transformX11}px, 0px) rotate(0deg)`, 
                                transition: isMoving ? 'none' : 'transform 0.2s ease-out'}">
                        </div>

                        <div class="layer">
                            <img src="../assets/picture/head12.webp" 
                                data-height="300" data-width="3200" height="159" width="1696" 
                                :style="{height: '159px', width: '1696px', transform: `translate(${transformX12}px, 0px) rotate(0deg)`, 
                                transition: isMoving ? 'none' : 'transform 0.2s ease-out'}">
                        </div>

                        <div class="layer">
                            <img src="../assets/picture/head13.webp" 
                                data-height="300" data-width="3200" height="162" width="1728" 
                                :style="{height: '162px', width: '1728px', transform: `translate(${transformX13}px, 1.08px) rotate(0deg)`, 
                                transition: isMoving ? 'none' : 'transform 0.2s ease-out'}">
                        </div>

                        <div class="layer">
                            <img src="../assets/picture/head14.webp" 
                                data-height="300" data-width="3200" height="156" width="1664" 
                                :style="{height: '156px', width: '1664px', transform: `translate(${transformX14}px, 0px) rotate(0deg)`, 
                                transition: isMoving ? 'none' : 'transform 0.2s ease-out'}">
                        </div>

                        <div class="layer">
                            <img src="../assets/picture/head15.webp" 
                                data-height="300" data-width="3200" height="156" width="1664" 
                                :style="{height: '156px', width: '1664px', transform: `translate(${transformX15}px, 0px) rotate(0deg)`, 
                                transition: isMoving ? 'none' : 'transform 0.2s ease-out'}">
                        </div>

                        <div class="layer">
                            <img src="../assets/picture/head16.webp" 
                                data-height="300" data-width="3200" height="156" width="1664" 
                                :style="{height: '156px', width: '1664px', transform: `translate(${transformX16}px, -10.4px) rotate(0deg)`, 
                                transition: isMoving ? 'none' : 'transform 0.2s ease-out'}">
                        </div>

                        <div class="layer">
                            <img src="../assets/picture/head17.webp" 
                                data-height="129" data-width="200" height="67" width="104" 
                                :style="{height: '67.08px', width: '104px', transform: `translate(${transformX17}px, 10.4px) rotate(0deg)`, 
                                transition: isMoving ? 'none' : 'transform 0.2s ease-out'}">
                        </div>

                        <div class="layer">
                            <img src="../assets/picture/head18.webp" 
                                data-height="164" data-width="256" height="85" width="133" 
                                :style="{height: '85.28px', width: '133.12px', transform: `translate(${transformX18}px, 10.4px) rotate(0deg)`, 
                                transition: isMoving ? 'none' : 'transform 0.2s ease-out'}">
                        </div>

                        <div class="layer">
                            <img src="../assets/picture/head19.webp" 
                                data-height="300" data-width="3200" height="156" width="1664" 
                                :style="{height: '156px', width: '1664px', transform: `translate(${transformX19}px, 0px) rotate(0deg)`, 
                                transition: isMoving ? 'none' : 'transform 0.2s ease-out'}">
                        </div>

                        <div class="layer">
                            <video loop="" src="../assets/picture/head20.webm" 
                                playsinline="" width="1664" height="156" 
                                :style="{objectFit: 'cover', height: '156px', width: '1664px', transform: `translate(${transformX20}px, 10.4px) rotate(0deg)`,
                                transition: isMoving ? 'none' : 'transform 0.2s ease-out'}"  data-height="300" data-width="3200"></video>
                        </div>

                        <div class="layer">
                            <img src="../assets/picture/head21.webp" 
                                data-height="300" data-width="3200" height="156" width="1664" 
                                :style="{height: '156px', width: '1664px', transform: `translate(${transformX21}px, 0px) rotate(0deg)`, 
                                transition: isMoving ? 'none' : 'transform 0.2s ease-out'}">
                        </div>

                        <div class="layer">
                            <img src="../assets/picture/head22.webp" 
                                data-height="300" data-width="3200" height="156" width="1664" 
                                :style="{height: '156px', width: '1664px', transform: `translate(${transformX22}px, 0px) rotate(0deg)`, 
                                transition: isMoving ? 'none' : 'transform 0.2s ease-out'}">
                        </div>

                    </div>
                </div>
            </div>

            <!--仪表盘-->
            <div class="bili-header_channel">

            </div>

        </div>

        <model :visible="uploadModel" @close="closeModel" />

    </div>
    
</template>

<style scoped>

body {
    margin: 0;
    font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei, sans-serif !important;
}
ul {
    list-style-type: none
}

a {
    color: inherit;
    text-decoration: none;
}

.bili-header{
    min-height: 64px;
    position: relative;
    margin: 0 ;
    max-width: 2560px;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.large-header{
    background-color: #FFFFFF;
}

.bili-header__bar{
    position: absolute;
    top: 0;
    z-index: 1002;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    width: 100%;
    max-width: 1630px;
    height: 64px;
}

.left-entry{
    display: flex;
    align-items: center;
    margin-right: 30px;
    padding: 0 0;
    flex-shrink: 0;
}

.left-entry .default-entry{
    margin-right: 10px;
    display: inline-block;
    height: 64px;
    line-height: 64px;
    color: #FFFFFF;
    font-size: 14.5px;
    cursor: pointer;
}

.bili-header__banner{
    position: relative;
    z-index: 0;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    min-width: 1000px;
    min-height: 155px;
    height: 9.375vw;
    max-height: 240px;
    background-color: #e3e5e7;
    background-position: center 0;
    background-size: cover;
    background-repeat: no-repeat;
}

.animated-banner{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}

.layer{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.center-search-container {
    flex: 2;
    height: 38px;
}

.center-search__bar {
    position: relative;
    margin: 0 auto;
    min-width: 181px;
    max-width: 500px;
}

.center-search__bar.is-focus {
    box-shadow: 0 0 30px rgba(0, 0, 0, .1);
    border-radius: 8px;
}

#center-searchform {
    display: flex;
    align-items: center;
    padding: 0 48px 0 4px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    line-height: 38px;
    border: 1px solid white;
    height: 40px;
    background-color: white;
    opacity: .9;
    transition: background-color .3s;
}

#center-searchform:hover {
    opacity: 1;
}

#center-searchform:focus {
    border: 1px solid gray;
    border-bottom: none;
    background: white;
}

.center-search-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 0 8px;
    width: 100%;
    height: 28px;
    border: 2px solid transparent;
    border-radius: 6px;
}

.center-search-content.focused {
    background-color: rgba(128, 128, 128, 0.219);
}

.center-search-input {
    flex: auto;
    overflow: hidden;
    padding-right: 8px;
    border: none;
    outline: none;
    background-color: transparent;
    box-shadow: none;
    color: black;
    font-size: 14px;
    line-height: 20px;
}

.center-search-btn {
    position: absolute;
    top: 3px;
    right: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    color: black;
    line-height: 32px;
    cursor: pointer;
    transition: background-color .3s;
}

.center-search-btn:hover {
    background-color: rgba(128, 128, 128, 0.219);
}

.right-entry {
    display: flex;
    align-items: center;
    margin-right: 50px;
}

.right-entry-item {
    display: block;
    flex-shrink: 0;
    margin-right: 4px;
    min-width: 50px;
    text-align: center;
    cursor: pointer;
}

.right-entry-item--upload {
    margin: 0;
}

.v-popover-wrap {
    position: relative;
}

.header-upload-entry {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 16px;
    width: 90px;
    height: 34px;
    border-radius: 8px;
    background: #fb7299;
    color: #fff;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    transition: background-color .3s;
}

.header-upload-entry__icon {
    margin-right: 5px;
    color: #fff;
}

.header-upload-entry__text {
    color: #fff;
}

.right_entry__outside {
    display: flex;
    align-items: center;
    flex-direction: column;
    flex-shrink: 0;
    margin-right: 0;
    min-width: 50px;
    text-align: center;
    font-size: 13px;
}

.right-entry-icon {
    margin-bottom: 2px;
    color: #fff;
    -webkit-font-smoothing: antialiased;
}

.right-entry-text {
    color: #fff;
}

</style>